﻿@{
    var avatar = "/Modules/Meres/Styles/no_avatar.png";
    var attachements = new[]
        {
        new {Id="0",Name="CV"},
        new {Id="1",Name="Letter de motif"},
        new {Id="2",Name="Application"}
        };

    var rds = new[]
        {
        new {Id="0",Name="(default)"},
        new {Id="1",Name="University relations"},
        new {Id="2",Name="Family relations"}
        };

    var processes = new[]
        {
        new {Id="0",Name="(default)"},
        new {Id="1",Name="treatment"},
        new {Id="2",Name="others"}
        };


    var calendars = new[]
        {
        new {Id="0",Name="(default)"},
        new {Id="1",Name="Holidays"},
        new {Id="2",Name="Team calendar"}
        };

    var journals = new[]
        {
        new {Id="0",Name="(default)"},
        new {Id="1",Name="treatment"},
        new {Id="2",Name="Notes"}
        };
}
<div class="personInfoView" style="height: 100%; width: 100%" data-personId="@Model.Id">
    <div style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px">
        <div id="mainArea" class="mainArea" style="height: 100%; width: 100%">
            <div class="ui-layout-center">
                <div id="infofunc" style="height: 100%; width: 100%">
                    <div style="padding: 5px; overflow: auto" class="ui-layout-center">
                        <div style="float: left">
                            <img src="@avatar" alt="" style="width: 100px; height: 100px; border: 1px solid #DEDEDE" />
                            <div>
                                <span class="ui-icon ui-icon-plus flatStyle" style="height: 16px; width: 16px; float: left;
                                    margin: 1px" />
                                <span class="ui-icon ui-icon-minus flatStyle" style="height: 16px; width: 16px; float: left;
                                    margin: 1px" />
                            </div>
                        </div>
                        <div style="float: left; margin-left: 5px">
                            <input placeholder="FirstName" type="text" style="width: 100%; font-size: large" value="@Model.Name" />
                            <input placeholder="LastName" type="text" style="width: 100%; font-size: large" />
                            <input placeholder="Category" type="text" style="width: 100%" value="@Model.PersonCategories.Name" />
                            <input placeholder="Departements/Memberships" type="text" style="width: 100%" />
                            <p style="margin-top: 5px">
                                <input type="checkbox" checked="checked" style="float: left;" id="canLogin" />
                                <label style="float: left; margin-left: 5px">
                                    Can login</label>
                            </p>
                            <div id="canLoginProperties">
                                <input placeholder="Loggin name" type="text" style="width: 100%" />
                                <p>
                                    <input type="password" value="password" readonly="readonly" style="float: left;" />
                                    <span class="flatStyle" style="float: left; margin-top: 2px; padding: 4px; cursor: pointer">
                                        <span class="ui-icon ui-icon-pencil">Left</span>
                                    </span>
                                </p>
                                <input placeholder="GroupRights" type="text" style="width: 100%" />
                                <input placeholder="UserRights" type="text" style="width: 100%" />
                            </div>
                        </div>
                    </div>
                    <div id="peopleFunctionLink" style="width: 100%; height: 100%" class="ui-layout-east">
                        <div id="peopleFunctionAccordion">
                            <h3>
                                <a href="#">Documents</a></h3>
                            <div>
                                <div class="accordionAction">
                                    @{
                                        Html.RenderPartial("AccordionActionButtons", new[] { "attach", "open", "download", "delete" });
                                    }
                                </div>
                                <ul class="circleItems selectableItems">
                                    @{
                                        foreach (var attachement in attachements)
                                        {
                                        <li>@attachement.Name</li>
                                        }
                                    }
                                </ul>
                            </div>
                            <h3>
                                <a href="#">Relationships</a></h3>
                            <div>
                                <div class="accordionAction">
                                    @{
                                        Html.RenderPartial("AccordionActionButtons", new[] { "add", "open", "delete" });
                                    }
                                </div>
                                <ul class="circleItems selectableItems">
                                    @{
                                        foreach (var rd in rds)
                                        {
                                        <li>@rd.Name</li>
                                        }
                                    }
                                </ul>
                            </div>
                            <h3>
                                <a href="#">Processes</a></h3>
                            <div>
                                <div class="accordionAction">
                                    @{
                                        Html.RenderPartial("AccordionActionButtons", new[] { "add", "open", "delete" });
                                    }
                                </div>
                                <ul class="circleItems selectableItems">
                                    @{
                                        foreach (var p in processes)
                                        {
                                        <li>@p.Name</li>
                                        }
                                    }
                                </ul>
                            </div>
                            <h3>
                                <a href="#">Calendars</a></h3>
                            <div>
                                <div class="accordionAction">
                                    @{
                                        Html.RenderPartial("AccordionActionButtons", new[] { "add", "open", "delete" });
                                    }
                                </div>
                                <ul class="circleItems selectableItems">
                                    @{
                                        foreach (var c in calendars)
                                        {
                                        <li>@c.Name</li>
                                        }
                                    }
                                </ul>
                            </div>
                            <h3>
                                <a href="#">Journals</a></h3>
                            <div>
                                <div class="accordionAction">
                                    @{
                                        Html.RenderPartial("AccordionActionButtons", new[] { "add", "open", "delete" });
                                    }
                                </div>
                                <ul class="circleItems selectableItems">
                                    @{
                                        foreach (var j in journals)
                                        {
                                        <li>@j.Name</li>
                                        }
                                    }
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ui-layout-south personInfoTabs panelArea centerTabs">
                <ul class="peopleViewTabIcon" style="background: #F4F4F4;">
                    <li><a href="#tabs-general">Information</a></li>
                    <li><a href="#tabs-education">Education</a></li>
                    <li><a href="#tabs-family">Family</a></li>
                    <li><a href="#tabs-profession">Profession</a></li>
                </ul>
                <div id="tabs-general" style="padding: 10px" data-fieldgroup="Information">
                </div>
                <div id="tabs-education" style="padding: 10px">
                    ABC
                </div>
                <div id="tabs-family">
                    DEF
                </div>
                <div id="tabs-profession">
                    GHI
                </div>
            </div>
        </div>
    </div>
</div>
